<template>
  <div>
    <el-form ref="queryForm" :inline="true" label-width="80px" label-position="right">
      <el-form-item label="身份证">
        <el-input v-model="idCardLastFour" placeholder="请输入身份证"></el-input>
      </el-form-item>
      <el-form-item label="修改日期" style="width: 398px;">
        <el-date-picker v-model="modifyDate" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="status" placeholder="请选择审核状态">
          <el-option label="待审核" value="waiting"></el-option>
          <el-option label="预提交" value="pending"></el-option>
          <el-option label="审核通过" value="approved"></el-option>
          <el-option label="审核拒绝" value="rejected"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="padding-top: 20px;">
        <el-button type="primary" @click="handleSearch" size="medium">查询</el-button>
        <!--      </el-form-item>-->
        <!--      <el-form-item style="padding-top: 40px;">-->
        <el-button type="primary" @click="resetQuery" size="medium"> 重置</el-button>
      </el-form-item>
    </el-form>

    <el-table border :data="tableData" style="margin-top:  20px">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="name" label="客户姓名"></el-table-column>
      <el-table-column prop="idCardLastFour" label="身份证后四位">
        <template slot-scope="scope">
          {{ lastFourCharacters(scope.row.idCardLastFour) }}
        </template>
      </el-table-column>
      <el-table-column prop="modifyInfo" label="客户修改信息" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="status" label="审核状态">
        <template slot-scope="scope">
          {{ getStatusText(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column prop="phoneReviewResult" label="手机号复核结果"></el-table-column>
      <el-table-column prop="typeReviewResult" label="客户类型复核结果"></el-table-column>
      <el-table-column prop="rejectReason" label="拒绝原因"></el-table-column>
      <el-table-column prop="modifyDate" label="修改日期"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button  type="primary"  @click="handleUpload(scope.row)">上传附件</el-button> -->
          <!--  -->
          <el-upload
            ref="upload"
            class="upload-demo"
            :action="uploadCustomerFileUrl"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple="multiple"
            :limit="3"
            :on-exceed="handleExceed"
            :on-error="consoleError"
            :on-change="handleChange"
            :on-success="handleSuccess"
            :file-list="scope.row.fileList">
            <el-button size="small" v-if="scope.row.status === '预提交' || scope.row.status === 'pending' " type="primary"
                       @click="getNow(scope.row,scope.$index)">
              附件上传
            </el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>

          <el-button type="primary" v-if="scope.row.status === '预提交' || scope.row.status === 'pending' "
                     @click="submitUpload(scope.row)">提交
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="pageSize"
                   @current-change="handleSearch"
                   :current-page.sync="pageNum"
                   :page-size="10" layout="total, prev, pager, next" :total="total">
    </el-pagination>
  </div>

</template>

<script>
export default {
  data() {
    return {
      uploadCustomerFileUrl: window.CONFIG.tradingUrl + "/CustomerRecord/uploadFile", // 上传的文件服务器地址
      multiple: true,
      //imgData: Params({}, api.upload.upload),
      // 总条数
      total: 0,
      //查询参数
      idCardLastFour: '',
      modifyDate: '',
      status: '',
      name: '',
      updateTimeStart: '',
      updateTimeEnd: '',
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      fileList: [],
      selIndex: 0,
      //推送综合
      fileContent: '',
      fileName: '',
      idNo: '',
      serNo: '',

      statusEnum: {
        waiting: '待审核',
        pending: '预提交',
        approved: '审核通过',
        rejected: '审核拒绝'
      }

    };
  },
  created() {
    //进入页面就走查询逻辑进行初始化
    this.handleSearch();
  },
  methods: {

    //附件获取
    getNow(val, index) {
      console.log(val, index)
      this.selIndex = index
    },

    // 计算属性，用于截取字段后四位
    lastFourCharacters(cellValue) {
      return cellValue.slice(-4);
    },

    //枚举值换行方法
    getStatusText(status) {
      return this.statusEnum[status] || '未知状态';
    },

    handleSearch() {
      //  查询逻辑
      let config = {
        headers: {
          'Content-Type': 'application/json',
          'charset': 'utf-8'
        }
      }
      var queryData = {}
      queryData.idCardLastFour = this.idCardLastFour
      queryData.status = this.status
      queryData.updateTimeStart = this.modifyDate[0]
      queryData.updateTimeEnd = this.modifyDate[1]
      queryData.pageNum = this.pageNum
      queryData.pageSize = this.pageSize
      console.log('============data', queryData)
      axios
        .post(window.CONFIG.tradingUrl + '/CustomerRecord/queryCustomerRecordList', queryData, config)
        .then(
          (res) => {
            console.log('客户修改记录基本信息查询结果：', res)
            if (res.data.status === 'true') {
              console.log('客户修改记录信息成功')
              // 返回信息处理：
              this.tableData = res.data.data.list
              this.total = res.data.data.total
              this.tableData.forEach(item => {
                item.fileList = item.fileList || []
              });
              if (res.data.data.list.length > 0) {
                window.globalUiKit.notify('提示', res.data.msg, 'success')
              } else {
                window.globalUiKit.notify('提示', '未查询客户修改记录信息，请联系管理员', 'info')
              }
            } else {
              this.tableData = []
              window.globalUiKit.notify('提示', '未查询到客户修改记录，请联系管理员', 'info')
              console.log('客户修改记录基本信息未成功：')
            }
          }
        )
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.idCardLastFour = undefined
      this.modifyDate = ''
      this.status = undefined
      // this.resetForm("queryForm");

    },

    consoleError(err, file, fileList) {
      console.log("consoleError")
      console.log(err, file, fileList)
    },

    // handleChange(file, fileListbak) {
    //   console.log("handleChange")
    //   // this.fileList = this.$refs.upload.fileList
    //   this.tableData[this.selIndex].fileList = fileListbak
    // },
    // 上传到服务器
    submitUpload(row) {
      console.log("提交的文件列表")
      var pushZongHe = {}
      pushZongHe.idNo = row.idCardLastFour
      pushZongHe.fileList = row.fileList
      pushZongHe.serNo = row.serNo
      this.$refs.upload.submit()
      let config = {
        headers: {
          'Content-Type': 'application/json',
          'charset': 'utf-8'
        }
      }
      axios
        .post(window.CONFIG.tradingUrl + '/CustomerRecord/pushZongHe', pushZongHe, config)
        .then(
          (res) => {
            console.log('附件推送综合系统信：', res)
            if (res.data.status === 'true') {
              window.globalUiKit.notify('提示', res.data.msg, 'info')
            } else {
              window.globalUiKit.notify('提示', res.data.msg, 'info')
              console.log('未附件推送综合系统失败：')
            }
          }
        )
    },

    handleSuccess(response, file, fileList) {
      //this.fileList.push(response.data)
      this.tableData[this.selIndex].fileList.push(response.data)
    },
    handleRemove(file, fileList) {
      console.log("文件移除列表时的钩子")
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      console.log("文件移除列表前的钩子")
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>
